
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="Keywords" content="网站关键词">
    <meta name="Description" content="网站介绍">
    <link rel="stylesheet" href="/Sign_in/css/base.css">
    <link rel="stylesheet" href="/Sign_in/css/iconfont.css">
    <link rel="stylesheet" href="/Sign_in/css/reg.css">
</head>
<body>
<div id="ajax-hook"></div>
<div class="wrap">
    <div class="wpn">
        <div class="form-data pos">
            <a href="/front/frontIndex"><img src="/Sign_in/img/logo.png" class="head-logo"></a>
            <!--<p class="tel-warn hide"><i class="icon-warn"></i></p>-->
                <p class="p-input pos">
                    <label for="phoneNum">手机号</label>
                    <input type="number" name="phoneNum" id="phoneNum" autocomplete="off">
                    <span class="tel-warn tel-err hide"><em></em><i class="icon-warn"></i></span>
                </p>
                <p class="p-input pos" id="sendcode">
                    <label for="phoneCode">输入验证码</label>
                    <input type="number" name="phoneCode" id="phoneCode">
                    <button class="send" id="phoneMsg" onclick="message()">获取验证码</button>
                    <span class="time hide"><em>120</em>s</span>
                    <span class="error hide"><em></em><i class="icon-warn" style="margin-left: 5px"></i></span>
                </p>
                <p class="p-input pos" id="pwd">
                    <label for="password">输入密码</label>
                    <input type="password" name="password" id="password">
                    <span class="tel-warn pwd-err hide"><em></em><i class="icon-warn" style="margin-left: 5px"></i></span>
                </p>
                <p class="p-input pos" id="confirmpwd">
                    <label for="password2">确认密码</label>
                    <input type="password" name="password2" id="password2">
                    <span class="tel-warn confirmpwd-err hide"><em></em><i class="icon-warn" style="margin-left: 5px"></i></span>
                </p>
                <div class="reg_checkboxline pos">
                    <span class="z"><i class="icon-ok-sign boxcol" nullmsg="请同意!"></i></span>
                    <input type="hidden" name="agree" value="1">
                    <div class="Validform_checktip"></div>
                    <p>我已阅读并接受 <a href="#" target="_top">《117协议说明》</a></p>
                </div>

                <button class="lang-btn" onclick="login()">注册</button>
                <div class="bottom-info">已有账号，<a href="/front/frontLogin">马上登录</a></div>
                <div class="third-party">
                    <a href="#" class="log-qq icon-qq-round"></a>
                    <a href="#" class="log-qq icon-weixin"></a>
                    <a href="#" class="log-qq icon-sina1"></a>
                </div>
                <p class="right">Powered by © 2018</p>
            </div>
    </div>
</div>
<script src="/Sign_in/js/jquery.js"></script>
<script src="/Sign_in/js/agree.js"></script>
<script src="/layui/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>

<script>
    var btn = document.querySelector('#phoneMsg');
    // 全局变量，定义剩下的秒数
    var time = 59;

    // 验证码
    function message () {
        var $ = layui.jquery;

        var phoneNum = document.getElementById("phoneNum").value;

        console.log(phoneNum.length);
        if(phoneNum.length == 11){
            $.ajax({
                url: "/userLogin/message?phoneNum=" + phoneNum,
                type: "post",
                dataType: "json",
                success: function(result) {
                    if (result.code == '0') {
                        // $("#phoneMsg").html("已发送验证码");
                        // 禁用按钮
                        btn.disabled = true;
                        // 开启定时器
                        var timer = setInterval(function () {
                            // 判断剩余秒数
                            if (time == 0) {
                                // 清除定时器和复原按钮
                                clearInterval(timer);
                                btn.disabled = false;
                                btn.innerHTML = '获取验证码';
                            } else {
                                btn.innerHTML = '还剩下' + time + '秒';
                                time--;
                            }
                        }, 1000);
                    }
                },
            });
        }else {
            layer.msg("手机号位数为11位!");
        }
    }


    function login() {
        var $ = layui.jquery;

        var phoneNum = document.getElementById("phoneNum").value;
        var password = document.getElementById("password").value;
        var password2 = document.getElementById("password2").value;
        var phoneCode = document.getElementById("phoneCode").value;

        console.log(phoneNum.length);
        if(phoneNum.length == 11 && password != '' && password2 != '' && (password == password2)){
            $.ajax({
                url: '/userLogin/save?phoneNum=' + phoneNum + '&password=' + password + '&phoneCode=' + phoneCode,
                type: 'post',
                dataType: 'json',
                success: function (result) {
                    if (result.code == '1') {
                        window.location = '/front/frontLogin';
                    } else {
                        layer.msg(result.msg)
                    }
                }
            });
        }else {
            layer.msg("请输入正确的格式!");
        }
    }

</script>


</body>
</html>